<!--
 * @Author: GL
 * @Date: 2022-09-23 14:03:51
 * @LastEditors: GL
 * @LastEditTime: 2023-04-05 15:24:03
 * @Description: 用户管理
-->
<template>
  <div class="user">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情 -->
    <el-dialog v-model="centerDialogVisible" title="用户详情" width="60%" align-center>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">用户姓名</div>
          </template>
          {{ pInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">性别</div>
          </template>
          {{ pInfo.sex }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">联系方式</div>
          </template>
          {{ pInfo.phone }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">Cancel</el-button>
          <el-button type="primary" @click="cancel">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="editDialogVisible" title="用户编辑" width="60%" align-center>
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">用户姓名</div>
          </template>
          <el-input v-model="userInfo.name" placeholder="Please input" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">性别</div>
          </template>
          <el-input v-model="userInfo.sex" placeholder="Please input" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">联系方式</div>
          </template>
          <el-input v-model="userInfo.phone" placeholder="Please input" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editCancel">取消</el-button>
          <el-button type="primary" @click="editCancel">保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, updateUser } from "../../network/user";
export default {
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      editDialogVisible: false,
      pInfo: {},
      userInfo: {}

    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserList().then(res => {
        this.tableData = res.data
      })
    },
    // 详情
    handleEdit(index, row) {
      this.pInfo = row;
      this.centerDialogVisible = true;
    },
    // 编辑
    handleDelete(index, row) {
      this.userInfo = row;
      this.editDialogVisible = true
    },
    cancel() {
      this.centerDialogVisible = false;
      this.pInfo = {};
    },
    editCancel() {
      updateUser({
        id:this.userInfo.id,
        name:this.userInfo.name,
        sex:this.userInfo.sex,
        phone:this.userInfo.phone
      }).then(res => {
        console.log(res);
        this.$message({
          type: 'success',
          message: res.message
        });
        this.editDialogVisible = false;
        this.pInfo = {};
      })

    }

  }
}
</script>

<style lang="scss" scoped></style>